<template>
     <div class="mod-room">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.name" placeholder="设备名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.number" placeholder="设备编号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t('handle.search') }}</el-button>
                <el-button  type="primary"  v-if="isAuth('ic:device:save')" @click="showGdMap()">地图显示</el-button>
                <el-button  type="danger"  v-if="isAuth('batch:delete')" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ $t('handle.batchDelete') }}</el-button>
            </el-form-item>
            </el-form>
        <el-table
            :data="dataList"
            height="500"
            ref="table"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            >
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                v-if='show'
                prop="id"
                header-align="center"
                align="center"
                width="70"
                label="ID">
            </el-table-column>
            <el-table-column
                fixed
                type="index"
               :label="$t('tabble.No')"
                width="50"
                :index="indexMethod">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="name"
                header-align="center"
                align="center"
                label="设备名称">
            </el-table-column>
            <el-table-column
                prop="number"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
                label="设备编号">
            </el-table-column>
            <el-table-column
                prop="deviceType"
                header-align="center"
                align="center"
                :show-overflow-tooltip="true"
                label="设备类型">
                <template slot-scope="scope">
                    <span>{{deviceTypeFilter(scope.row.deviceType)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="purpose"
                header-align="center"
                align="center"
                label="设备用途">
                <template slot-scope="scope">
                    <span>{{purposeFilter(scope.row.purpose)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="productCode"
                header-align="center"
                align="center"
                label="产品代码">
            </el-table-column>
            <!-- <el-table-column
                prop="housingName"
                header-align="center"
                align="center"
                label="所属小区">
            </el-table-column> -->
            <!-- <el-table-column
                prop="buildingName"
                header-align="center"
                align="center"
                label="所属楼栋">
            </el-table-column> -->
            <!-- <el-table-column
                :show-overflow-tooltip="true"
                prop="addressText"
                header-align="center"
                align="center"
                label="标准地址">
            </el-table-column> -->
            <el-table-column
                :show-overflow-tooltip="true"
                prop="installationAddress"
                header-align="center"
                align="center"
                label="安装地址">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="ip"
                header-align="center"
                align="center"
                label="IP地址">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="hardiskIp"
                header-align="center"
                align="center"
                label="硬盘IP">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="channelId"
                header-align="center"
                align="center"
                label="通道ID">
            </el-table-column>
             <el-table-column
                :show-overflow-tooltip="true"
                prop="regionName"
                header-align="center"
                align="center"
                label="所属区域">
            </el-table-column>
            <el-table-column
                prop="status"
                header-align="center"
                align="center"
                :label="$t('status.status')">
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.status == 1 ? 'success' : 'danger'"
                        >{{deviceStatusFilter(scope.row.status)}}</el-tag>
                    <!-- <span>{{deviceStatusFilter(scope.row.status)}}</span> -->
                </template>
                <!-- <template slot-scope="scope">
                <el-tag v-if="scope.row.isSystem === 1" size="small" type="danger">在线</el-tag>
                <el-tag v-else size="small">离线</el-tag>
                </template> -->
            </el-table-column>
            <!-- <el-table-column
                prop="connectData"
                header-align="center"
                align="center"
                label="设备连接时间">
            </el-table-column> -->
            <!-- <el-table-column
                prop="deviceCreator"
                header-align="center"
                align="center"
                label="设备创建人">
            </el-table-column> -->
            <!-- <el-table-column
                prop="deviceCreateDate"
                header-align="center"
                align="center"
                label="设备搭建时间">
            </el-table-column>
            <el-table-column
                prop="dgStandardInfoId"
                header-align="center"
                align="center"
                label="设备地理位置">
            </el-table-column> -->
            <!-- <el-table-column
                prop="delFlag"
                header-align="center"
                align="center"
                label="是否删除">
                <template slot-scope="scope">
                    <span>{{deviceDelFilter(scope.row.delFlag)}}</span>
                </template>
            </el-table-column> -->
            <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="195"
                :label="$t('handle.handle')">
                <template slot-scope="scope">
                <el-button  type="text" v-if="isAuth('ic:device:update')" size="small" @click="addOrUpdateHandle(scope.row.id)" >{{ $t('handle.update') }}</el-button>
                <el-button  type="text" v-if="isAuth('ic:device:delete')" size="small" @click="deleteHandle(scope.row.id)">{{ $t('handle.delete') }}</el-button>
                <el-button  type="text" v-if="isAuth('ic:device:list:send ')" size="small" @click="devicePermissionHandle(scope.row)" >名单下发</el-button>
                 <el-button  type="text" v-if="isAuth('ic:device:vedio') && scope.row.deviceType == 2" size="small" @click="showVideo(scope.row)">视频</el-button>
                 <el-button  type="text" v-if="isAuth('ic:device:mqttCreate')" size="small" @click="createMqttUser(scope.row)">mqtt用户创建</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <devicePermissonView v-if="devicePermissonViewVisable" ref="devicePermissonView"></devicePermissonView>
    <gd-map-device  v-if="gdMmapDevicVisable" ref="gdMapDevice"></gd-map-device>
  </div>
</template>
<script>
import AddOrUpdate from "./device-add-or-update";
import devicePermissonView from "./devicePermissonView";
import gdMapDevice from "./dialog/gdMapDeviceDialog";

export default {
  data() {
    return {
      gdMmapDevicVisable: false,
      devicePermissonViewVisable: false,
      communityId: "",
      dataForm: {
        name: "",
        number: "",
        housingEstateId: "",
        bulidingId: "",
        dgStandardInfoId: ""
      },
      options: {
        fullName: "",
        id: ""
      },
      options2: {
        fullName: "",
        id: ""
      },
      show: false,
      supportAgreementDicts: [],
      deviceDataDicts: [],
      accessTypeDicts: [],
      dicts: [],
      dictType: { 1: "在线" },
      delDicts: [],
      delDictType: { 1: "未删除" },
      deviceTypeDicts: [],
      deviceTypeDictType: { 1: "人脸机" },
      purposeDicts: [],
      purposeDictType: { 1: "使用" },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },
  computed: {
    addressId() {
      return this.$store.state.address.regionId;
    },
    deviceStatusFilter() {
      return function(type) {
        /** do something */
        return this.dictType[type];
      };
    },
    deviceDelFilter() {
      return function(type) {
        return this.delDictType[type];
      };
    },
    deviceTypeFilter() {
      return function(type) {
        return this.deviceTypeDictType[type];
      };
    },
    purposeFilter() {
      return function(type) {
        return this.purposeDictType[type];
      };
    }
  },
  // 引入的组件
  components: {
    AddOrUpdate,
    devicePermissonView,
    gdMapDevice
  },
  created() {
    this.getDeviceType();
    this.getDeviceStatus();
    this.getDelType();
    this.getPurpose();
    this.getAccessType();
    this.getSupportAgreement();
    this.getDeviceDataType();
  },
  activated() {
    // this.getDataList();
    // this.getAllHous();
    // this.getAllBuild();
  },
  methods: {
    // 创建mqtt用户
    createMqttUser(row) {
      this.$http({
        url: "dg-ic/ic/device/permission/createmqtt",
        method: "post",
        data: this.$http.adornData({
          id: row.id
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "创建mqtt用户成功",
            type: "success",
            duration: 1000,
            onClose: () => {}
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    showVideo(row) {
      alert("调用cs视频端")
      CefSharp.BindObjectAsync("boundAsync").then(result => {
        jsObj.openVideo();
      });
      // 具体方法。。。
    },
    showGdMap() {
      this.gdMmapDevicVisable = true;
      this.$nextTick(() => {
        // 根据区域id获取设备表并且是带勾选的
        this.$refs.gdMapDevice.init(this.communityId);
      });
    },
    adjust(communityId) {
      this.communityId = communityId;
      setTimeout(() => {
        this.$refs["table"].doLayout();
      }, 100);
    },
    // 设备数据类型
    getDeviceDataType() {
      this.$http({
        url: "dg-ic/ic/dict/type/device_data_status",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.deviceDataDicts = data.data;
        }
      });
    },
    // 支持协议
    getSupportAgreement() {
      this.$http({
        url: "dg-ic/ic/dict/type/device_support_agreement",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.supportAgreementDicts = data.data;
        }
      });
    },
    // 接入方式
    getAccessType() {
      this.$http({
        url: "dg-ic/ic/dict/type/device_access_type",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.accessTypeDicts = data.data;
        }
      });
    },
    // 设备用途
    getPurpose() {
      this.$http({
        url: "dg-ic/ic/dict/type/purpose_status",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.purposeDicts = data.data;
          for (let i = 0; i < data.data.length; i++) {
            this.purposeDictType[data.data[i].value] = data.data[i].label;
          }
        }
      });
    },
    // 设备类型
    getDeviceType() {
      this.$http({
        url: "dg-ic/ic/dict/type/device_type",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.deviceTypeDicts = data.data;
          for (let i = 0; i < data.data.length; i++) {
            this.deviceTypeDictType[data.data[i].value] = data.data[i].label;
          }
        }
      });
    },
    // 设备状态
    getDelType() {
      this.$http({
        url: "dg-ic/ic/dict/type/del_status",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.delDicts = data.data;
          for (let i = 0; i < data.data.length; i++) {
            this.delDictType[data.data[i].value] = data.data[i].label;
          }
        }
      });
    },
    getDeviceStatus() {
      this.$http({
        url: "dg-ic/ic/dict/type/device_status",
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dicts = data.data;
          for (let i = 0; i < data.data.length; i++) {
            this.dictType[data.data[i].value] = data.data[i].label;
          }
        }
      });
    },
    indexMethod(index) {
      return index + 1;
    },
    // 获取数据列表
    getDataList() {
      setTimeout(() => {
        this.$refs["table"].doLayout();
      }, 100);
      this.dataListLoading = true;
      // 以前的返回列表代码
      this.$http({
        url: `/dg-ic/ic/device/list`,
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.dataForm.name,
          number: this.dataForm.number,
          housingEstateId:
            sessionStorage.getItem("thiscommunityId") === "null"
              ? this.communityId
              : sessionStorage.getItem("thiscommunityId")
        })
      }).then(
        ({ data }) => {
          this.dataForm.housingEstateId = "";
          if (data && data.code === 0) {
            this.dataList = data.data.list;
            this.totalPage = data.data.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
            this.$message.error(data.msg);
          }
          this.dataListLoading = false;
        },
        error => {
          if (error.response.status === 403) {
            this.$message.error("你没有权限");
          } else {
            this.$message.error("系统错误，请联系管理员");
          }
        }
      );
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增/修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(
          id,
          this.dicts,
          this.deviceTypeDicts,
          this.purposeDicts,
          this.accessTypeDicts,
          this.supportAgreementDicts,
          this.deviceDataDicts,
          this.communityId
        );
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http({
            url: `/dg-ic/ic/device/delete`,
            method: "delete",
            data: this.$http.adornData(ids, false)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            }
          });
        })
        .catch(() => {});
    },
    // 设备权限下发
    devicePermissionHandle(row) {
      this.devicePermissonViewVisable = true;
      this.$nextTick(() => {
        // 根据区域id获取设备表并且是带勾选的
        this.$refs.devicePermissonView.init(row.id, row.ip);
      });
    }
  }
};
</script>
<style>
#pane-six {
  overflow: auto;
  height: 100%;
}
</style>


